<template>
	<view class="content">
		<!-- <view class="xunBox">
			<view class="xunTitle">
				设备信息
			</view>
			<view class="xunWrap"> -->
				<!-- <view class="xunTxt">
					<text>设备名称</text>{{showInfo.deviceName}}
				</view>
				<view class="xunTxt">
					<text>设备型号</text>张三(18677889900)
				</view>
				<view class="xunTxt">
					<text>机器条码</text>上海市徐汇区美焕大厦3楼
				</view> -->
				<!-- <view class="xunTxt">
					<text>计划开始时间</text>2025-06-09 10:00
				</view>
				<view class="xunTxt">
					<text>到达时间</text>北京字节跳动有限公司
				</view>
				<view class="xunTxt">
					<text>离开时间</text>签退后获取时间
				</view> -->
			<!-- </view>
			
			
			
		</view> -->
		
		<view class="xunBox">
			<view class="xunTitle">
				预约信息
			</view>
			<view class="xunWrap">
				<view class="xunTxt">
					<text>预约服务时间</text>{{showInfo.appointmentTimePeriod}}
				</view>
				<view class="xunTxt">
					<text>预约内容</text>{{showInfo.appointmentType}}
				</view>
				<view class="xunTxt">
					<text>联系人</text>{{showInfo.contactName}}
				</view>
				<view class="xunTxt">
					<text>联系方式</text>{{showInfo.contactPhone}}
				</view>
				<view class="xunTxt">
					<text>联系地址</text>{{showInfo.contactAddress}}
				</view>
				<view class="xunTxt">
					<text>备注</text>{{showInfo.remark}}
				</view>
				<view class="xunTxt flxxx">
					<text>上传图片</text>
					<view class="imgInfo" v-if="showInfo.imageUrl != null">
						<image v-if="String(showInfo.imageUrl).includes(',')" @click="showImg(item)" v-for="(item,index) in showInfo.imageUrl.split(',')" :key="index" :src="item" mode=""></image>
						<image v-else @click="showImg(showInfo.imageUrl)" :src="showInfo.imageUrl" mode=""></image>
					</view>
				</view>
			</view>	
			
			<view class="xunBtnBox" v-if="isHide">
				<!-- <text @click="singBack">签退</text> -->
				<text @click="singInOrder">签到</text>
			</view>
			
		</view>	
		
		<view class="xunBox">
			<view class="xunTitle">
				订单信息
			</view>
			<view class="xunWrap">
				<view class="xunTxt">
					<text>服务单号</text>{{showInfo.orderNo}}
				</view>
				<view class="xunTxt">
					<text>下单时间</text>{{showInfo.submitTime}}
				</view>
			</view>
		</view>	
		
		<view class="xunBox">
			<view class="xunTitle">
				问题记录
			</view>
			<view class="xunTable">
					<view class="xunHead">
						<text>楼号</text>
						<text>楼层</text>
						<text>房间名称</text>
						<text>品牌</text>
						<text>状态</text>
					</view>
					
					<view class="xunBody" @click="goItem(item)" v-for="(item,index) in xunList">
						<text>{{item.floorDesc}}</text>
						<text>{{item.roomNoDesc}}</text>
						<text>{{item.roomNameDesc}}</text>
						<text>{{item.brand}}</text>
						<text v-if="item.status == 0">未检验</text>
						<text v-else-if="item.status == 1">正常</text>
						<text style="color:#FF4D4F;" v-else-if="item.status == 2">异常</text>
					</view>
			</view>
			
			<view class="caoBtn" v-if="showInfo.status != 3">
				<text @click="showInput">手动输入机器编号</text>
				<text @click="scanTask">扫一扫</text>
			</view>
			
			
			
		</view>		
			
		<view class="xunBottomBox" v-if="showInfo.status != 3">
			<text class="btn1" @click="completeOrderTwo(0)">部分完成</text>
			<text class="btn2" @click="completeOrderTwo(1)">完成任务</text>
<!-- 			<text class="btn1" @click="cancelOrder">取消</text>
			<text class="btn2" @click="singInOrder">签到</text> -->
		</view>	
		
		<baseInfo ref="baseInfo" @showForm="showForm"></baseInfo>
		<inputDevice ref="inputDevice" @chuanInfo="showCode"></inputDevice>
		<reasonBox @showBtt="showTuiInfo" ref="reasonBox"></reasonBox>
		
	</view>
</template>

<script>
	import baseInfo from '@/components/baseInfo.vue';
	import inputDevice from '@/components/inputDevice.vue';
	import reasonBox from '@/components/reasonBox.vue';
	import { xunSignIn, xunSignUp, getOrderById, getDeviceByCode, getTaskItem, completeOrder } from '@/api/login.js';
	import QQMapWX from "../../util/qqmap-wx-jssdk.js";
	import moment from 'moment';
	export default {
		components:{
			baseInfo, inputDevice, reasonBox
		},
		data() {
			return {
				baseInfo:{
					
				},
				isHide: true,
				showInfo: {},
				taskId: '',
				formData:{
					arrivalTime: '',
					lateReason: '',
					latePhotos: ''
				},
				xunList: [],
			}
		},
		onLoad(opt) {
			this.taskId = opt.idd;
			this.getDetail(opt.idd);
		},
		onUnload() {
			let objj = {
				type: 0,
				leaveTime: moment().format('YYYY-MM-DD HH:mm:ss')
			};
			xunSignUp(this.taskId,JSON.stringify(objj)).then(res=>{
				
			});	
		},
		methods: {
			// 刷新表单
			showForm(){
				this.getDetail(this.taskId);
			},
			cancelOrder(){
				uni.navigateBack({
					delta: 1
				})
			},
			completeOrderTwo(type){
				if(this.isHide) {
					return uni.$u.toast('请先签到!');
				}
				if(this.xunList.length == 0) {
					return uni.$u.toast('问题记录不能为空!');
				}
				if(type == 0) {
					// 部分完成
					let objj = {
						type: type,
						leaveTime: moment().format('YYYY-MM-DD HH:mm:ss')
					};
					uni.showLoading({
						title: '提交中...'
					});
					xunSignUp(this.taskId,JSON.stringify(objj)).then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							uni.$u.toast('操作成功!');
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/engineer/index'
								})
							},500);
						} else {
							uni.$u.toast(res.msg);
						}
					});
				} else {
					let msgArr = [];
					this.xunList.forEach(item=>{
						if(item.status == 0) {
							msgArr.push(item)
						}
					});
					if(msgArr.length > 0) {
						return uni.$u.toast('问题记录有未检验的设备，无法提交!');
					}
					uni.showModal({
					    title: '提示',
					    content: '确定要完成吗?',
					    success: res => {
					        if (res.confirm) {
					            let objj = {
					            	type: type,
					            	leaveTime: moment().format('YYYY-MM-DD HH:mm:ss')
					            };
					            uni.showLoading({
					            	title: '提交中...'
					            });
					            xunSignUp(this.taskId,JSON.stringify(objj)).then(res=>{
					            	if(res.code == 200) {
										completeOrder(this.taskId).then(resaa => {
											uni.hideLoading();
											if(resaa.code == 200) {
												uni.$u.toast('操作成功!');
												setTimeout(()=>{
													uni.switchTab({
														url: '/pages/engineer/index'
													})
												},500);
											} else{
												uni.$u.toast(resaa.msg);
											}
										});
					            	} else {
					            		uni.$u.toast(res.msg);
					            	}
					            });
					        }
					    }
					});
				}
				
			},
			getDetail(idd) {
				getOrderById({id:idd}).then(res=>{
					if(res.code == 200) {
						this.showInfo = res.data.repairOrder;
						this.xunList = res.data.deviceInfoList;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			submitForm(){
				
			},
			showCode(val){
				this.showTaskInfo(val);
			},
			showTuiInfo(val){
				console.log(val);
				this.formData.lateReason = val.lateReason;
				this.formData.latePhotos = val.latePhotos;
			},
			// 签到
			singInOrder(){
				//判断当前时间是否在时间范围
				let baseTime = String(this.showInfo.appointmentTimePeriod).split(' ');
				let startDate = baseTime[0] + ' ' + String(baseTime[1]).split('-')[0];
				let endDate = baseTime[0] + ' ' + String(baseTime[1]).split('-')[0];
				// console.log(startDate,endDate)
				let isTime = moment().isBetween(startDate,endDate);
				// if(!isTime) {
				// 	return uni.$u.toast('当前时间不在服务期间，无法签到!');
				// }
				// 获取当前位置
				let qqmapsdk;
				qqmapsdk = new QQMapWX({
					key: "OUYBZ-JF2HP-Q5ADA-VAJQV-EAKVT-UIFKT"
				});
				uni.getLocation({
					success: (res) => {
						qqmapsdk.reverseGeocoder({
							//根据经纬度获取地址信息 
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: ress => {
								// console.log(ress.result.address_component.city, '位置信息');
								// this.areaName = ress.result.address_component.city;
								this.formData.arrivalTime = moment().format('YYYY-MM-DD HH:mm:ss');
								let objj = {
									arrivalTime: moment().format('YYYY-MM-DD HH:mm:ss')
								};
								// console.log(this.formData);
								uni.showLoading({
									title: '签到中...'
								});
								xunSignIn(this.taskId,JSON.stringify(objj)).then(res=>{
									uni.hideLoading();
									if(res.code == 200) {
										uni.$u.toast('签到成功!');
										getOrderById({id:this.taskId}).then(resaa=>{
											this.showInfo = resaa.data.repairOrder;
											this.isHide = false;
										});	
									} else {
										this.isHide = true;
										uni.$u.toast(res.msg);
									}
								})
							}
						})
					},
					fail: (res) => {
						console.log('失败！！', res);
					}
				});
			},
			scanTask(){
				if(this.isHide) {
					return uni.$u.toast('请先签到!');
				}
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							const val = res.result;
							this.showTaskInfo(val);
						} else {
							uni.$u.toast('请重新扫描!');
							return false;
						}
					}
				});	
			},
			goItem(val){
				if(this.isHide) {
					return uni.$u.toast('请先签到!');
				}
				let deviceInfo = val;
				getTaskItem(this.taskId,val.id).then(ress=>{
					this.$refs['baseInfo'].showInfo(ress.data,deviceInfo,this.showInfo);
				});
			},
			showTaskInfo(code){
				getDeviceByCode({deviceCode: code,isMaster: uni.getStorageSync('userInfo').isMaster}).then(res=>{
					if(res.code == 200) {
						res.data.status = 0;
						this.xunList.push(res.data);
						this.xunList = this.uniqueFun(this.xunList,'id');
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			uniqueFun(arr,type) {
			  const res = new Map();
			  return arr.filter((a)=>!res.has(a[type])&& res.set(a[type],1));
			},
			showInput(){
				if(this.formData.arrivalTime == null) {
					return uni.$u.toast('请先签到!');
				}
				this.$refs['inputDevice'].showInfo();
			},
			singBack(){
				this.$refs['reasonBox'].showInfo();
			},
			// 预览图片
			showImg(val){
				console.log(val);
				uni.previewImage({
					urls: [val]
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#F5F5F5;padding:24rpx 24rpx 180rpx;
	.xunBottomBox{
		height: 180rpx;background: #FFFFFF;@include flx;justify-content: space-between;position: fixed;bottom:0;left:0;
		box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);width:100%;z-index:999;
		text{
			display: block;width: 336rpx;height: 80rpx;background: #EFEFF1;text-align: center;
			border-radius: 40rpx;@include baseFont(30rpx,#17181B,80rpx);margin-top:18rpx;
		}
		.btn1{
			margin-left:24rpx;
		}
		.btn2{
			margin-right:24rpx;background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);color:#fff;font-weight:500;
		}
	}
	.xunBox{
		background: #FFFFFF;box-shadow: inset 0px -2rpx 0px 0px #F0F0F0;border-radius:12rpx;padding:24rpx 32rpx;margin-bottom:16rpx;
		.xunTitle{
			@include baseFont(30rpx,#333,36rpx);font-weight:500;padding-left:22rpx;position: relative;margin-bottom:20rpx;
		}
		.xunTitle::after{
			content:'';width:6rpx;height:30rpx;background: linear-gradient( 180deg, #3671E9 0%, #7297E2 100%);
			border-radius: 24rpx;position: absolute;left: 0;top:50%;transform: translateY(-50%);
		}
		.xunTable{
			.xunHead{
				@include flx;
				text{
					display: block;width:20%;@include baseFont(26rpx,#929292,36rpx);text-align: center;
				}
			}
			.xunBody{
				@include flx;
				text{
					@include baseFont(28rpx,#333,96rpx);border-bottom:2rpx solid #F0F0F0;display: block;width:20%;text-align: center;
					height:96rpx;overflow: hidden;
				}
			}
		}
		.caoBtn{
			@include flx;justify-content: space-between;margin-top:24rpx;
			text{
				display: block;width: 304rpx;height: 64rpx;background: #FFFFFF;border-radius: 8rpx;border: 2rpx solid #D1D1D6;
				text-align: center;@include baseFont(28rpx,#333,64rpx);
			}
			text:last-of-type{
				background: #F0F5FF;border-color:#3671E9;color:#3671E9;
			}
		}
		.xunList{
			.jianli{
				.jianTitle{
					@include baseFont(28rpx,#000,44rpx);font-weight:500;margin-bottom:12rpx;
				}
				.jianTxt{
					@include baseFont(28rpx,#666,40rpx);margin-bottom:12rpx;
				}
			}
			.jianli:last-of-type{
				.jianTxt:last-of-type{
					margin-bottom:0;
				}
			}
		}
		.xunWrap{
			// padding:0 0 20rpx;
			.xunTxt{
				@include baseFont(28rpx,#333,40rpx);margin-bottom:12rpx;
				text{
					color:#666;display: inline-block;width:176rpx;
				}
				.imgInfo{
					image{
						width:124rpx;height:124rpx;border-radius:8rpx;
					}
				}
			}
			.flxxx{
				@include flx;
			}
			.xunTxt:last-of-type{
				margin-bottom:0;
			}
		}
		.xunBtnBox{
			@include flx;margin-top:20rpx;justify-content: space-between;
			text{
				display: block;width: 304rpx;height: 64rpx;background: #FFF2F2;text-align: center;
				border-radius:8rpx;border: 2rpx solid #FF4D4F;@include baseFont(28rpx,#FF4D4F,64rpx);
			}
			text:last-of-type{
				border-color:#3671E9;background: #ECF2FF;color:#3671E9;
			}
		}
		
	}
}
</style>
